二十二 · 代码致敬 · 图文特效(4)

搜索

走访

符桂英

韦绍兰

何玉珍

郝菊香

曹黑毛

李凤云

毛银梅

赵兰英

刘风孩

刘改连

林爱兰

完整名单

陈亚扁

黄有良

李秀梅

骈焕英

李爱连

符美菊

李美金

王志凤

陈连村

任兰娥

张先兔

《二十二》

哪怕

她们一直在等待日本政府的道歉

日本政府一直在等待她们的死亡

但是

用生命和时间赛跑的

不止她们，还有我们

8月15日日本投降纪念日

代码致敬《三十二》、《二十二》

更不要忘记

她们

二十二

▼

https://v.qq.com/txp/iframe/player.html?vid=y0351lbtrg7&width=500&height=375&auto=0

三十二

▼

https://v.qq.com/txp/iframe/player.html?vid=j053717td6k&width=500&height=375&auto=0

代码说明

如果你对上文中 JZ 多媒体解决方案设计的慰安妇强征名单「搜索动画」的代码实现有学习需要，请继续阅读以下教程；如果没有学习需要，则欢迎分享。

导语：近期，各大企业级微信公众平台频繁推出代码特效型图文。其中一部分基于常规 CSS 样式，另有一部分则遵循我们 JZ 多媒体解决方案在去年和腾讯联合制定的 SVG AttributeName 规范，推出了不少优质作品，整个微信行业正在朝着专业代码级运营发展。特此，作为微信图文内动画标准的官方制定机构，本厂牌即日起发布一系列基础的代码样式免费教程，欢迎学习研读。

 第一期   渐变 · 纯代码图文特效(1)

 第二期   地震 · 纯代码图文特效(2)

 第三期   拼图游戏 · 纯代码图文特效(3)

本文已纳入 JZ 多媒体解决方案新发售图书版权，禁止任何形式转载或洗稿，禁止任何第三方编辑器在非授权情况下转存为样式模版。

CSS 遮罩

1）遮罩，是蒙版的一种重要形态。在 HTML5 中，遮罩的实现方式多种多样，而 CSS 遮罩最为常见。通常来说，只要有遮罩层和背景层或背景文字，遮罩的效果就可以被用户比较明显地观察到▼

.demo {
   -webkit-mask : url("images/mask.png");
   background-image: url("images/logo.png");
}

2）有了这个标准模型，我们就不仅可以选择 .png 的静态背景和遮罩，自然也可以如本文中，载入了两个 .gif 的动态背景和遮罩。另外，背景层和遮罩层都可以做更丰富的参数设置。比如根据 W3C 的规则手册，我们可以调整遮罩形式▼

.demo {
   /* 图片型 */
   -webkit-mask : url(mask.png);
   /* 渐变型 */
   -webkit-mask : linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
   /* 图片滤色型 */
   -webkit-mask : image(url(mask.png), skyblue);
   /* 图片渐变型 */
   -webkit-mask : url(mask.png'), linear-gradient(rgba(0, 0, 0, 1), transparent);
   }

3）需要注意的是，由于微信图文消息的自适效果并不好，所以当我们在处理遮罩的<mask>和<background>时都可以适当考虑平铺方式，避免彼此覆盖不足露出元素的尴尬情况▼

.demo {
   -webkit-mask-repeat : no-repeat | repeat-x | repeat-y | space | round | repeat(默认值);
   }

4）可以加上文案，让遮罩富有更深刻的内涵。这样一来，像本文的遮罩动画就一共有三层：遮罩层是一张 .gif，它的内容包括圆形的游走和放大路径，你大约只需要3-5分钟就可以在 AE 里做出一个▼

PS：如果你对 AE 还一脸茫然，请扫描这里的二维码加入 JZ 的技术课程先行学习▼

考虑到 JZ 的高级代码设计经常被盗用，所以不妨通过 PS 的动态模式增加一个水印，并导出为 .gif 用作遮罩▼

4）背景图片的选择这里我们就不多讲了，当然如果你想具体了解 .gif 文件的制作方法，也可以点击阅读《如何制作 GIF（上）》和《如何制作 GIF（下）》逐步学习。另外要提醒的是<-webkit-mask-size>和<-background-size>也可以用来更好地让遮罩与背景巧妙对齐，实现独特的效果。比如本文的遮罩层就能够相对准确地在 6.13 秒时基本露出红色的「完整名单」四个字。而关于背景文字，本文的名单编辑讨巧使用了秀米编辑器的布局功能，最后在带有 HTML5 编辑功能的 135 编辑器中加入了遮罩动画。

所以，本质上只需要两端代码和两张图片，我们都可以在微信中实现遮罩动画，关键还是拼创意。这里是 JZ 多媒体解决方案，中国最好的 Digital 数字营销先锋技术神秘厂牌，想要了解更多新媒体高级运营技术，也可以加入我们的网易云课堂深度学习▼

网易云课堂 高级排版术

线下讲座安排

- END -

#招聘启事#广告设计师 职务要求：

1.有扎实的平面设计功底

2.有扎实的动效设计功底

3.对广告创意有独立见解

4.对界面交互有基本认知

5.应届毕业或毕业两年内

职务说明：

1.上海办公

2.专职客户数字广告业务

3.参与教务系统

4.参与设计专著图书写作

基本待遇：

1.8000-12000薪资

2.住房（人才公寓）

3.午餐全额补贴

4.五险一金

应聘材料：

1.个人简历（PDF）

2.作品集 材料不限大小，请邮件至 

[e-mail]

本则招聘长期有效

---

其他你会感兴趣的内容

回复 排版阅读互联网文案排版教程

回复 标题了解优质标题的酝酿方法

回复 配图学习图片素材的搭配方法

回复 H  5开启移动营销技术学习课

回复 广告看更多行业广告知识大全

H5、平面、视频等数字营销服务请致电

TEL：[phone]

---

客户案例：APEC 峰会 | 中国航天科技集团 | 香奈儿 | 肯德基（湖南） | 中国国际航空 | 湖北省电视台 | 河南卫视 | 浙江省人民广播电台 | 三生制药 | 交通银行 | 建设银行 | 真格基金 | 南方周末 | 上海闵行教育学院 | 牛津大学出版社 | 新东方集团 | 伟巴斯特 | 雪佛兰汽车 | 观致汽车 | 雷诺汽车 | TNS 新华信 | 高力国际｜第一太平戴维斯｜德国莱茵｜盖茨基金会｜追星集团

抱歉，除了干货，其他什么也没有。